<template>
    <!-- 账单 -->
    <div class="bill">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="bill-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
               <ul class="list-box" v-for="item in listData" :key="item.id">
                    <li class="flex justify-between items-center h-60 font-26">
                        <p>{{ item.type }}</p>
                        <p class="flex items-center">
                            <img class="bill-img mr-10" :src="`${HOST_URL}/symbol/${'usdt'}.png`" @error="handleImageError" />
                            <span>{{ item.num.toLocaleString() }} {{ item.currency }}</span>
                        </p>
                    </li>
                    <li class="flex justify-between items-center h-60 font-26">
                        <p>{{ item.time }}</p>
                        <p :class="item.id ? 'green':'red' ">{{ item.state }}</p>
                    </li>
               </ul>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { List, PullRefresh } from 'vant';
import { HOST_URL } from '@/config';
import defaultImage from '@/assets/loading-default.png';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
    },
    data() {
        return {
            HOST_URL,
            defaultImage,
            loading: false,
            finished:true,
            refreshing:false,
            listData:[
                {
                    id:0,
                    type:'充值',
                    num:99999,
                    currency:'USDT',
                    time:'2024/11/08 01:30:55',
                    state:'失败'
                },
                {
                    id:1,
                    type:'充值',
                    num:1000,
                    currency:'BTC',
                    time:'2024/11/08 00:30:55',
                    state:'成功'
                },
            ]
        }
    },
    methods: {
        handleImageError(event) {
            event.target.src = this.defaultImage;
        },
        // 上拉加载
        onLoad() {
            console.log(11);
            
        },
        // 下拉刷新
        onRefresh() {
            console.log(22);
            this.refreshing = false;
        },
    },
}
</script>

<style lang="scss" scoped>
.bill{
    padding: 20px;
    .bill-list{
        .list-box{
            padding: 20px 0;
            border-bottom: 2px dotted #ccc;
        }
        .bill-img{
            width: 42px;
            height: 42px;
        }
    }
    .red{
        color: #f56c6c;
    }
    .green{
        color: #0bc98d;
    }
}
</style>